<!-- 供给费用 -->
<template>
  <div class="supply-cost-wrap">
    <div class="tabs">
      <px-radio-group v-model="activeName" class="tabSwitch" @change="tabSelectHandler">
        <px-radio-button v-for="item in tabsOption" :key="item.name" :label="item.name">{{ item.label }}</px-radio-button>
      </px-radio-group>
      <div class="top_query">
        <px-form ref="formRef" class="custom-form-ui inspection-form" :model="queryParams" :inline="true" label-width="100px">
          <px-form-item class="mt5" label="时间维度" prop="dataFormat" style="width: auto; padding-right: 10px">
            <px-radio-group v-model="queryParams.timeType" style="margin-left: 10px" @change="handleChangeTimeType">
              <px-radio size="small" label="Monthly">月</px-radio>
              <px-radio size="small" label="Yearly">年</px-radio>
            </px-radio-group>
          </px-form-item>
          <px-form-item class="mt5" label="时间范围" style="width: 300px">
            <px-date-picker
              v-if="queryParams.timeType === 'Monthly'"
              v-model="queryParams.timeRange"
              type="monthrange"
              value-format="YYYY-MM"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="changeMonth"
            />
            <div v-if="queryParams.timeType === 'Yearly'">
              <yearPicker ref="statisticPicker" :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
            </div>
          </px-form-item>
          <div class="px-form-item mt5" style="border: none">
            <px-button type="primary" icon="" @click="handleQuery">搜索</px-button>
            <px-button icon="" @click="resetQuery">重置</px-button>
            <px-button v-if="activeName === 'overView'" v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'" @click="handleExport">导出</px-button>
          </div>
        </px-form>
      </div>
    </div>
    <component :is="activeCom" ref="childRef" :activeName="activeName" :queryParams="queryParams" class="componnet_com" />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, markRaw, computed, onMounted } from "vue";
import overViewCom from "./overView/index.vue";
import electicityCom from "./electricity/index.vue";
import waterCom from "./water/index.vue";
import gasCom from "./gas/index.vue";
import ngCom from "./ng/index.vue";
import streamHotwaterCom from "./streamHotwater/index.vue";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import { getLastDayOfMonth } from "@/views/common/energy/cost/supplyCost/utils";
import dayjs from "dayjs";

defineOptions({
  name: "ALL_ENERGY_COST_SUPPLY"
});

const state = reactive({
  queryParams: {
    timeType: "Monthly",
    factory: "",
    timeRange: []
  }
});

const { queryParams } = toRefs(state);
const dateValue = ref({ startYear: new Date().getFullYear(), endYear: new Date().getFullYear() });
const formRef = ref();
const childRef = ref();
const tabsOption = ref([
  {
    name: "overView",
    label: "总览",
    com: markRaw(overViewCom)
  },
  {
    name: "Electricity",
    label: "电",
    com: markRaw(electicityCom)
  },
  {
    name: "Water",
    label: "水",
    com: markRaw(waterCom)
  },
  {
    name: "NG",
    label: "天然气",
    com: markRaw(ngCom)
  },
  {
    name: "HotStream",
    label: "蒸汽/热水",
    com: markRaw(streamHotwaterCom)
  },
  {
    name: "Gas",
    label: "大宗气",
    com: markRaw(gasCom)
  }
]);

const activeName = ref("overView");

const activeCom = computed(() => tabsOption.value.find(item => item.name === activeName.value).com);
// 获取系统中的统一的厂区，下拉框处理
const facCode = ref(localStorage.getItem("facCode"));
onMounted(() => {
  state.queryParams.factory = facCode;
  handleChangeTimeType("Monthly");
});

const tabSelectHandler = selectName => {
  activeName.value = selectName;
  handleQuery();
};

const yearStart = ref("");
const yearEnd = ref("");
// 选择年份
const updateStatisticYear = (startYear, endYear) => {
  yearStart.value = `${startYear}-01-01 00:00:00` || null;
  yearEnd.value = `${endYear}-12-31 23:59:59` || null;
  state.queryParams.timeRange = [yearStart.value, yearEnd.value];
};

// 选择月份
const changeMonth = arr => {
  state.queryParams.timeRange = [`${arr[0]}-01 00:00:00`, `${getLastDayOfMonth(arr[1])} 23:59:59`];
};

// 默认展示时间范围
const handleChangeTimeType = val => {
  switch (val) {
    case "Monthly":
      state.queryParams.timeRange = [
        dayjs().subtract(12, "month").format("YYYY-MM") + "-01 00:00:00",
        dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD") + " 23:59:59"
      ];
      break;
    case "Yearly":
      let yearS = new Date().getFullYear();
      let yearE = new Date().getFullYear();
      yearStart.value = `${yearS}-01-01 00:00:00`;
      yearEnd.value = `${yearE}-12-31 23:59:59`;
      state.queryParams.timeRange = [yearStart.value, yearEnd.value];
      break;
    default:
      break;
  }
  handleQuery();
};

// 查询方法
const handleQuery = () => {
  // 检查 childRef 是否有值
  if (childRef.value) {
    // 调用子组件暴露的方法
    childRef.value.getData();
  }
};

// 重置按钮
const resetQuery = () => {
  state.queryParams = {
    timeType: "Monthly",
    factory: "",
    timeRange: []
  };
  handleChangeTimeType("Monthly");
};
// 导出
const handleExport = () => {
  // 检查 childRef 是否有值
  if (childRef.value) {
    // 调用子组件暴露的方法
    childRef.value.handleExport();
  }
};
</script>

<style lang="scss" scoped>
.supply-cost-wrap {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;

  .tabs {
    display: flex;
    height: 76px;
    padding: 16px 24px;
    margin-bottom: 16px;
    background: #fff;

    /*
    * tab样式
    */
    .tabSwitch {
      min-width: 300px;
      height: 44px;
      padding: 0 5px;
      margin-right: 20px;
      background-color: #f4f4f4;
      border-radius: 4px;

      :deep(.px-radio-button__inner) {
        background-color: #f4f4f4;
        border: none;
      }

      :deep(.is-active) {
        border: none;

        .px-radio-button__inner {
          background-color: var(--px-color-primary);
          border-radius: 4px;
        }
      }
    }
  }

  .px-scrollbar {
    .fab-tabs-fade-enter-active,
    .fab-tabs-fade-leave-active {
      transition: all 0.4s ease;
    }

    .fab-tabs-fade-enter-from {
      opacity: 0;
      transform: translateX(-80px);
    }

    .fab-tabs-fade-leave-to {
      opacity: 0;
      transform: translateX(80px);
    }
  }

  .componnet_com {
    background-color: #f0f2f5;
  }
}
</style>
